  <template>
  <div class="container flex-xyc">
    <div class="content-box flex">
      <div class="left">
        <div class="left-wrap">
          <h2>子流程名称</h2>
          <h3 class="sub-title" :class="appId+'' == item.applicationId + '' ? 'on' : '' " v-for="(item,index) in appList" :key="index" @click="getApplicationDetail(item.applicationId)">{{item.title}}</h3>
        </div>
        <div class="left-wrap">
          <h2>应用说明</h2>
          <el-button-group>
            <el-button :type="flowAppDetailType == 0 ? 'primary' : ''" @click="flowAppDetailType = 0">
              <el-icon class="el-icon--right"><ArrowLeft /></el-icon>
              流程说明
            </el-button>
            <el-button :type="flowAppDetailType == 1 ? 'primary' : ''" @click="flowAppDetailType = 1">
              应用说明
              <el-icon class="el-icon--right"><ArrowRight /></el-icon>
            </el-button>
          </el-button-group>
          <p v-if="flowAppDetailType == 0">{{ flowAppDetail?.flowDescription }}</p>
          <p v-if="flowAppDetailType == 1">{{ appDetail }}</p>
          <div v-if="flowAppDetailType == 0" style="margin-top: 20px;">
            <h2>流程视频</h2>
            <video :url="flowAppDetail?.video"></video>
          </div>
          <div v-if="flowAppDetailType == 1" style="margin-top: 20px;">
            <h2>应用视频</h2>
            <video :url="appDetail?.video"></video>
          </div>
        </div>
      </div>
      <center-comp :query="route.query" @runAPP_Callbask="getAppRunningLogs"></center-comp>
      <div class="right-wrap">
        <div class="item-wrap">
          <h2>应用运行</h2>
          <ul class="flex">
            <li @click="downloadLog">
              <img
                src="@/assets/images/square/xiazai_rizhi.png"
                alt="下载运行日志"
              />
              <span>下载运行日志</span>
            </li>
            <li>
              <img src="@/assets/images/square/yun_pan.png" alt="拷贝到云盘" />
              <span>拷贝到云盘</span>
            </li>
            <li>
              <img
                src="@/assets/images/square/yasuo_jieguo.png"
                alt="压缩运行结果"
              />
              <span>压缩运行结果</span>
            </li>
            <li>
              <img
                src="@/assets/images/square/huoqu_dongtai.png"
                alt="手动获取状态"
              />
              <span>手动获取状态</span>
            </li>
            <li>
              <img
                src="@/assets/images/square/zhongduan_yingyong.png"
                alt="中断当前应用"
              />
              <span>中断当前应用</span>
            </li>
            <li>
              <img
                src="@/assets/images/square/xiazai_yingyong.png"
                alt="下载应用说明"
              />
              <span>下载应用说明</span>
            </li>
          </ul>
        </div>

        <div class="item-wrap log">
          <div style="display: flex;justify-content: space-between;">
            <h2>运行日志</h2>
            <div class="runstatus" :class="runStatusStr === '运行中' || runStatusStr === '运行成功'? 'on' : 'off'">
              <div class="dian"></div>
              <span class="text">{{runStatusStr}}</span>
            </div>
          </div>

          <ul>
            <template v-if="runLogs?.length > 0">
              <li v-for="(item, i) in runLogs" :key="i">
                {{ item }}
              </li>
            </template>
            <li v-else>无数据</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CenterComp from '@/pages/member/views/flowapp/develop/components/CenterComp.vue'
import { useRoute } from 'vue-router'
import { onMounted, onUnmounted, ref } from 'vue'
import {
  reqDownAppRunLogData,
  reqGetAppInfo,
  reqGetAppRunLogData,
  reqGetSubFlowApplications,
  reqGetSmartFlowDetail,
  reqGetAppRunningStatus,
} from '@/pages/member/api/flowapp'
import { download } from '@/api/common'
import { getUploadHttpUrl, MsgWarn } from '@/utils/utils'

const route = useRoute()
const flowId = ref(0)
const flowAppDetail = ref<any>()
const flowAppDetailType = ref(0)
const appList = ref([])
const appId = ref(0)
const time_obj = ref()

onMounted(() => {
  getFlowAppSubList()
  // getAppRunningLogs()
  time_obj.value = setInterval(getAppRunningLogs, 5000)
})
onUnmounted(() => {
  clearInterval(time_obj.value)
  time_obj.value = null
})

// 获取应用详情
const appDetail = ref<string>('')
const getFlowAppSubList = async () => {
  flowId.value = Number(route.query.flowId)
  let flowAppRes = await reqGetSmartFlowDetail(flowId.value)
  flowAppDetail.value = flowAppRes.data
  let resp = await reqGetSubFlowApplications(flowId.value)
  appList.value = resp.data
  if(appList.value.length > 0){
    appId.value = appList.value[0].applicationId
    getApplicationDetail()
  }
}

const getApplicationDetail = async (_appId: number = 0) => {
  if ( _appId !=0 ) {
    appId.value = _appId
  }
  const { data } = await reqGetAppInfo(appId.value)
  appDetail.value = data.description as string
}

// 获取运行日志/运行状态
const runLogs = ref<string[]>([])
const runStatusStr = ref('准备中')
const getAppRunningLogs = async () => {
  const runId = Number(route.query.runId)
  const { data } = await reqGetAppRunLogData(runId)
  runLogs.value = data
  const { data: status_data } = await reqGetAppRunningStatus(runId)
  runStatusStr.value = status_data
}

// 下载运行日志
const downloadLog = async () => {
  const { code, data } = await reqDownAppRunLogData(appId.value)
  if (code === 0) {
    download(getUploadHttpUrl(data))
  }
}
</script>

<style scoped lang="scss">
.container {
  padding-bottom: 50px;
  overflow: hidden;
  background-color: #f7f8fa;

  .content-box {
    margin-top: 16px;
  }

  .left {
    >:nth-of-type(2) {
      margin-top: 20px;
    }
  }

  .left-wrap,
  .right-wrap {
    width: 300px;
    h2 {
      font-size: 14px;
      color: #021429;
      font-weight: bold;
      margin-bottom: 18px;
    }
  }
  .left-wrap {
    padding: 29px 18px;
    background-color: #fff;
    .sub-title {
      cursor: pointer;
      height: 40px;
      line-height: 40px;
      padding-left: 5px;
      margin-bottom: 20px;
      color: #5F6085;
      font-family: PingFang SC;
      font-size: 14px;
      letter-spacing: 0px;
      text-align: left;
      &.on {
        border-radius: 4px;
        background: #3AACE3;
        color: #fff;
      }
    }
    p {
      font-size: 12px;
      color: #8691a3;
      line-height: 22px;
    }
  }
  .right-wrap {
    width: 300px;
    .item-wrap {
      padding: 29px 18px 0;
      background-color: #fff;
      ul {
        &.flex {
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            width: 30%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 20px;
            img {
              width: 40px;
              height: 40px;
              margin-bottom: 5px;
            }
            span {
              font-size: 12px;
              color: #4e5969;
            }
          }
        }
      }
      &.log {
        margin-top: 20px;
        overflow: auto;
        ul {
          li {
            font-size: 12px;
            color: #8691a3;
            line-height: 14px;
            margin-bottom: 16px;
          }
        }
      }
    }
  }
}

.runstatus {
  cursor: pointer;
  .dian {
    width: 8px;
    height: 8px;
    // opacity: 0.5;
    border-radius: 50%;
    position: relative;
    z-index: 0;
    display: inline-block;
    &::after {
      content: '';
      width: 4px;
      height: 4px;
      border-radius: 50%;
      z-index: 1;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .text {
    margin-left: 5px;
    font-size: 14px;
  }
  &.on {
    .dian {
      background: #38b865d5;
      &::after {
        background: #38B865;
      }
    }
    .text{
      color: #00B42A;
    }
  }
  &.off {
    .dian {
      background: #EB5E12D5;
      &::after {
        background: #EB5E12;
      }
    }
    .text{
      color: #E47470;
    }
  }
}
</style>
